﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="../knockout-3.0.0.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
    <script type="text/javascript" src="../jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>    
</head>
<body>
    <h2>List of greenlit shows:</h2>
    <ul data-bind="foreach: shows">
        <li>
            <input type="checkbox" data-bind="checked: greenlit" />
            <span data-bind="text: name, explode: greenlit"></span>
        </li>
    </ul>
    <script>
        ko.bindingHandlers.explode = {
            update: function (element, valueAccessor) {
                ko.utils.unwrapObservable(valueAccessor()) ? $(element).fadeIn() :
                  $(element).effect('explode');
            }
        };

        var ShowModel = function(name) {
            var self = this;
            self.greenlit = ko.observable(true);
            self.name = ko.observable(name);
        };
        var ViewModel = function (shows) {
            var self = this;
            self.shows = ko.observableArray(shows);
        };

        var vm = new ViewModel([
            new ShowModel("Reality show 1"),
            new ShowModel("Angry cooking show"),
            new ShowModel("Reality show 2")
        ]);
        ko.applyBindings(vm);
    </script>
</body>
</html>